import React, { useState, useEffect } from 'react';
import '../../style/artist.css';
import axios from 'axios';

const ArtistItem = ({ artist }) => (
    <div className="artist-card">
        <img src={artist.imgSrc || artist.picUrl} alt={artist.name} />
        <p>{artist.name}</p>
    </div>
);

const ArtistsVisibleList = ({ artists }) => (
    <div className="artists-list">
        {artists.map(artist => (
            <ArtistItem key={artist.id} artist={artist} />
        ))}
    </div>
);

const Navigation = ({ options, selectedOption, onClickHandler }) => (
    <nav>
        {options.map(option => (
            <div
                key={option.label}
                className={`nav-item ${selectedOption === option.value ? 'selected' : ''}`}
                onClick={() => onClickHandler(option.value)}
            >
                {option.label}
            </div>
        ))}
    </nav>
);

const Artists = () => {
    const [selectedCountry, setSelectedCountry] = useState(-1);
    const [selectedGender, setSelectedGender] = useState(-1);
    const [selectedAlphabet, setSelectedAlphabet] = useState(-1);
    const [artists, setArtists] = useState([]);

    const countryOptions = [
        { label: '全部', value: -1 },
        { label: '华语', value: 7 },
        { label: '欧美', value: 96 },
        { label: '日本', value: 8 },
        { label: '韩国', value: 16 },
        { label: '其他', value: 0 }
    ];

    const genderOptions = [
        { label: '全部', value: -1 },
        { label: '男歌手', value: 1 },
        { label: '女歌手', value: 2 },
        { label: '乐队', value: 3 }
    ];

    const alphabetOptions = [
        { label: '全部', value: -1 },
        ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(letter => ({ label: letter, value: letter })),
        { label: '#', value: '#' }
    ];

    const fetchArtists = async () => {
        try {
            const response = await axios.get('http://localhost:3000/artist/list', {
                params: {
                    type: selectedGender,
                    area: selectedCountry,
                    initial: selectedAlphabet
                }
            });
            setArtists(response.data.artists || []);
        } catch (error) {
            console.error('Failed to fetch artists:', error);
        }
    };

    useEffect(() => {
        fetchArtists();
    }, [selectedCountry, selectedGender, selectedAlphabet]);

    return (
        <div className="artists">
            {/* 国家导航栏 */}
            <Navigation
                options={countryOptions}
                selectedOption={selectedCountry}
                onClickHandler={setSelectedCountry}
            />

            {/* 性别或类型导航栏 */}
            <Navigation
                options={genderOptions}
                selectedOption={selectedGender}
                onClickHandler={setSelectedGender}
            />

            {/* 字母导航栏 */}
            <Navigation
                options={alphabetOptions}
                selectedOption={selectedAlphabet}
                onClickHandler={setSelectedAlphabet}
            />

            <div className="artist-container">
                {artists.length > 0 ? (
                    <ArtistsVisibleList artists={artists} />
                ) : (
                    <p className="no-data">暂无数据</p>
                )}
            </div>
        </div>
    );
};

export default Artists;